<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员主界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        .content {
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .complaint-list {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .complaint-list table {
            width: 100%;
            border-collapse: collapse;
        }

        .complaint-list th,
        .complaint-list td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .complaint-list th {
            background-color: #f2f2f2;
        }

        .reply-form {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .reply-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .reply-form input,
        .reply-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .reply-form input[type="submit"] {
            background-color: #007BFF;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .reply-form input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
<div class="header">
    <h1>管理员主界面</h1>
</div>
<div>
    <form action="/user/reToUserManage">
        <input type="submit" value="用户管理">
    </form>
</div>
<div class="content">
    <div class="complaint-list">
        <h2>投诉邮件列表</h2>
        <table>
            <thead>
            <tr>
                <th>投诉标题</th>
                <th>投诉人</th>
                <th>被投诉人</th>
                <th>处理状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="complaint-list-body">
            <!-- 这里将通过 JavaScript 动态加载投诉数据 -->
            </tbody>
        </table>
    </div>
    <div class="reply—form" id="reply-form" style="display: none;">
        <h2>回复投诉</h2>
        <form action="/user/statusComplaint" method="post">
            <input type="hidden" id="complaintId" name="complaintId" value="具体的投诉 ID">
            <input type="hidden" id="complaintStatus" name="complaintStatus" value="已处理">
            <label for="replyContent">回复内容:</label>
            <textarea id="replyContent" name="replyContent" required></textarea>
            <input type="submit" value="提交回复" onclick="setComplaintStatusToProcessed()">
        </form>
    </div>
</div>
<script>
    // 页面加载完成后执行
    window.onload = function () {
        fetchComplaints();
    };

    // 从后端获取投诉信息
    function fetchComplaints() {
        fetch('http://localhost:8080/user/mainManager')
            .then(response => {
                // 检查响应状态是否正常
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                // 将响应数据解析为 JSON 格式
                return response.json();
            })
            .then(data => {
                const tableBody = document.getElementById('complaint-list-body');
                // 遍历投诉数据数组
                data.forEach(complaint => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                            <td>${complaint.title}</td>
                            <td>${complaint.complaining}</td>
                            <td>${complaint.complained}</td>
                            <td>${complaint.status}</td>
                            <td><button onclick="showReplyForm(${complaint.id})">回复</button></td>
                        `;
                    // 将新创建的行添加到表格主体中
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('请求失败:', error);
            });
    }

    // 显示回复表单
    function showReplyForm(complaintId) {
        const replyForm = document.getElementById('reply-form');
        const complaintIdInput = document.getElementById('complaintId');
        complaintIdInput.value = complaintId;
        replyForm.style.display = 'block';
    }
    // 设置投诉状态为已处理
    function setComplaintStatusToProcessed() {
        const complaintStatusInput = document.getElementById('complaintStatus');
       // complaintStatusInput.value = '已处理';
       complaintStatusInput.value = '1';
       
    }
</script>
</body>

</html>